<template>
  <div class="addOrEdit">
    <el-dialog
      :before-close="handClose"
      center
      width="30%"
      :title="title"
      :visible.sync="off"
      append-to-body
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="背景图" prop="imageUrl">
          <el-upload
            :style="{height:'70px'}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="preview"
            :on-remove="remove"
            :on-error="error"
            class="avatar-uploader"
            accept="image/*"
            action="http://192.168.1.68:18082/user/upload/image"
            list-type="picture-card"
          >
            <div class="add" v-if="title != '修改营销活动'">
              <img
                width="70"
                height="70"
                :src="ruleForm.imageUrl"
                alt
                style="position:absolute;top:0;left;0"
              />
              <i class="el-icon-plus imgIcon"></i>
            </div>
            <div class="edit" v-if="title == '修改营销活动'">
              <img width="70" :src="ruleForm.imageUrl" alt />
              <i v-if="isImg" class="el-icon-plus"></i>
            </div>
          </el-upload>
          <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>-->
        </el-form-item>
        <el-form-item label="跳珠地址" prop="linkUrl">
          <el-input v-model.trim="ruleForm.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select :style="{width: '100%'}" v-model="ruleForm.type">
            <el-option
              v-for="(item, index) in activityType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="create">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
import { addActivity, editActivity } from "@/api/supermarket/activity.js";
export default {
  name: "addActivity",
  props: {
    off: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    off(val) {
      if (val) {
        if (this.title.indexOf("新增") != -1) {
          this.$nextTick(() => {
            $(".add .el-icon-plus").addClass("imgIcon");
            $(".add").css({ border: "1px solid #ccc" });
          });
        } else {
          this.$nextTick(() => {
            $(".edit").css({ border: "none" });
          });
          this.isImg = false;
          this.ruleForm.imageUrl = this.rowData.imageUrl;
          this.ruleForm.linkUrl = this.rowData.linkUrl;
          this.ruleForm.title = this.rowData.title;
          this.ruleForm.type = this.rowData.type;
        }
      }
    }
  },
  data() {
    return {
      isImg: false,
      dialogImageUrl: "",
      dialogVisible: false,
      activityType: [
        { label: "网页", value: 0 },
        { label: "店铺", value: 1 },
        { label: "新品", value: 2 }
      ],
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        imageUrl: [
          { required: true, message: "背景图片不能为空", trigger: "blur" }
        ],
        linkUrl: [
          { required: true, message: "跳转地址不能为空", trigger: "blur" }
        ],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }]
      },
      ruleForm: {
        imageUrl: "",
        linkUrl: "",
        title: "",
        type: ""
      }
    };
  },
  methods: {
    preview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    remove(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.imageUrl = "";
    },
    error(err, file, fileList) {
      console.log(err, file, fileList);
    },
    handleAvatarSuccess(res, file) {
      console.log("上传成功res", res);
      console.log("上传成功file", file);
      this.ruleForm.imageUrl = res.data;
      this.isImg = true;
      if (this.title.indexOf("新增") != -1) {
        $(".add .el-icon-plus")
          .removeClass("imgIcon")
          .css({ position: "absolute", left: "70px", top: "48px" });
        $(".add").css({ border: "none" });
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    handClose() {
      //   this.$refs.ruleForm.resetFields();
      this.$set(this.ruleForm, "imageUrl", "");
      this.$set(this.ruleForm, "linkUrl", "");
      this.$set(this.ruleForm, "title", "");
      this.$set(this.ruleForm, "type", "");
      console.log(this.ruleForm);
      this.$emit("update:off", false);
    },
    create() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        } else {
          let obj = {};
          if (this.title.indexOf("新增") != -1) {
            obj = this.ruleForm;
            addActivity(obj).then(
              res => {
                this.$message({
                  type: "success",
                  message:
                    this.title.indexOf("新增") != -1 ? "新增成功" : "修改成功"
                });
                this.$emit("update:off", false);
                this.$parent.getList();
                this.$set(this.ruleForm, "imageUrl", "");
                this.$set(this.ruleForm, "linkUrl", "");
                this.$set(this.ruleForm, "title", "");
                this.$set(this.ruleForm, "type", "");
                //   this.$refs.ruleForm.resetFields();
              },
              err => {}
            );
          } else {
            obj = {
              carouselId: this.rowData.carouselId,
              createDate: this.rowData.createDate,
              imageUrl: this.ruleForm.imageUrl,
              linkUrl: this.ruleForm.linkUrl,
              status: this.rowData.status,
              title: this.ruleForm.title,
              token: this.rowData.token,
              type: this.ruleForm.type,
              updateDate: this.rowData.updateDate,
              userId: this.rowData.userId
            };
            editActivity(obj).then(
              res => {
                this.$message({
                  type: "success",
                  message:
                    this.title.indexOf("新增") != -1 ? "新增成功" : "修改成功"
                });
                this.$emit("update:off", false);
                this.$parent.getList();
                this.$set(this.ruleForm, "imageUrl", "");
                this.$set(this.ruleForm, "linkUrl", "");
                this.$set(this.ruleForm, "title", "");
                this.$set(this.ruleForm, "type", "");
                //   this.$refs.ruleForm.resetFields();
              },
              err => {}
            );
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
/deep/.el-upload--picture-card {
  border: none !important;
  text-align: left;
}
.imgIcon {
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
}
.add {
  width: 70px;
  height: 70px;
  border: 1px solid #ccc;
  position: relative;
}
</style>